{% load static %}

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">

    <meta charset="UTF-8">
    <title>主页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .sidebar {
            width: 250px;
            height: 100vh;
            background-color: #343a40;
            color: white;
            position: fixed;
            padding: 20px;
        }
        .sidebar img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 10px;
        }
        .content {
            margin-left: 260px;
            padding: 40px;
        }
        .btn-custom {
            width: 100%;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="sidebar text-center">
    <!-- 头像：你可以把 static 路径换成自己的头像文件 -->
    <img src="{% static 'images/img.png' %}" alt="头像">
    <h5 class="mt-2">{{ request.user.username }}</h5>
    <hr class="bg-light">
    <a href="{% url 'data_list' %}" class="btn btn-outline-light btn-custom">管理我的数据</a>
    <a href="{% url 'logout' %}" class="btn btn-danger btn-custom">退出登录</a>
</div>

<div class="content" style="background-image: url('{% static 'images/img_1.png' %}'); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 100vh; display: flex; align-items: center; justify-content: center;">

    <div style="background-color: rgba(255, 255, 255, 0.85); padding: 30px 40px; border-radius: 15px; text-align: justify; box-shadow: 0 0 10px rgba(0,0,0,0.2);">
        <h2 style="font-size: 36px; font-weight: bold; font-family: 'FangSong', 'KaiTi', serif; color: #2c3e50; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
    欢迎，{{ request.user.username }}
        </h2>
        <p style="font-size: 22px; font-family: 'FangSong', 'KaiTi', serif; color: #34495e; text-shadow: 1px 1px 3px rgba(0,0,0,0.2);">
            你已成功登录到宋氏办事大厅。
        </p>

        </p>

        <p id="current-time" style="font-weight: bold; font-size: 1.1em;">当前时间：加载中...</p>
    </div>

</div>

<script>
    function updateTime() {
        const now = new Date();
        const formatted = now.toLocaleString();
        document.getElementById('current-time').innerText = '当前时间：' + formatted;
    }
    setInterval(updateTime, 1000);
    updateTime();
</script>

</body>
</html>

